<template>
  <section
    class="file-upload-wrapper"
    :class="{'selected': fileList.length}"
  >
    <div v-if="fileList.length && !view" class="file-content" v-for="(item, index) in fileList" :key="item.name">
      <a>{{item.name}}</a>
      <!--<span class="el-icon-close" @click="deleteFile(index)"></span>-->
    </div>
    <div v-if="cloneValue.length" class="file-content border-bottom" v-for="(item, index) in cloneValue" :key="item.name">
      <a>{{item.fileName}}</a>
    </div>
    <div class="file-select" v-if="!view">
      <div id="video_container">
        <a>{{fileList.length ? '重新上传' : '选择附件'}}</a>
        <input type="file" ref="inputFile" :name="name" :multiple="multiple" :accept="accept" @change="change">
      </div>
    </div>

  </section>
</template>

<script>
  export default {
    data () {
      return {
        selected: true,
        fileName: '',
        file: '',
        fileList: [],
        cloneValue: this.value,
        progress: 0,
        flag: true,
        blankFlag: false
      }
    },
    props: {
      name: String,
      accept: {
        type: String,
        default: 'image/gif,image/jpeg,image/jpg,image/png,image/svg,application/pdf'
      },
      max: [Number, String],
      multiple: Boolean,
      value: Array
    },
    watch: {
      value () {
        this.cloneValue = this.value
      }
    },
    computed: {
      view () {
        return this.cloneValue.length > 0
      }
    },
    methods: {
      change (e) {
        this.blankFlag = false
        this.flag = true
        this.fileList = []
        let a = e.target.files || e.dataTransfer.files || []
        this.fileList.push.apply(this.fileList, a)
        this.fileList.map(item => {
          if (item.name.match(' ')) {
            this.blankFlag = true
            return this.$message.error('附件名称内不能有空格！')
          }
          if (item.name.match(',')) {
            this.blankFlag = true
            return this.$message.error('附件名称内不能有英文逗号！')
          }
          if (this.max) {
            if (item.size > this.$const.COOKIE.PDF_SIZE * 1024 * 1024 && item.type === 'application/pdf') {
              this.flag = false
              return this.$message.error(`附件大小超过30M限制`)
            } else if (item.size > this.$const.COOKIE.IMG_SIZE * 1024 * 1024) {
              this.flag = false
              return this.$message.error(`附件大小超过10M限制`)
            }
          }
        })
        if (!this.flag || this.blankFlag) {
          this.fileList = []
          this.$refs.inputFile.value = ''
        }
      },
      deleteFile () {
        this.fileList = []
      },
      resetData () {
        this.fileList = []
      },
      getSize () {
        if (this.fileList.length <= 0) {
          this.$message.error('附件必能为空！')
        }
      }
    },
    destroyed () {
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
.file-upload-wrapper{
  width: 100%;
  .file-content{
    height: 40px;
    line-height: 39px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 15px;
    color: #5a5e66;
    font-size: inherit;
    border-radius: 4px;
    border: 1px solid #d8dce5;
    border-bottom: none;
    .el-icon-close{
      float: right;
      position: relative;
      top: 9px;
      font-size: 18px;
      opacity: 0;
      transition: all 0.2s linear;
      cursor: pointer;
    }
    .el-icon-close:hover{
      color:#409eff;
    }
  }
  .file-content:hover{
    .el-icon-close{
      opacity: 1;
    }
  }
  .file-select{
    -webkit-appearance: none;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #d8dce5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #5a5e66;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
    text-align: center;
    position: relative;
    input{
      display: block;
      border: none;
      position: absolute;
      width: 100%;
      height: 100%;
      /* background: red; */
      top: 0;
      left: 0;
      opacity: 0;
      cursor: pointer;
    }
  }
}
.file-upload-wrapper.selected{
  .file-content{
    border-radius:0 ;
  }
  .file-content:first-child{
    border-radius: 4px 4px 0 0 ;
  }
  .file-select{
    border-radius: 0 0 4px 4px;
  }
}
.border-bottom:last-child{
  border-bottom: 1px solid #d8dce5;
  border-radius: 0 0 4px 4px !important;
}
</style>
